<template>
  <div class="all">
    <head-search search_type="franchisee"></head-search>


    <div class="time_prograss">
      <div class="time_title">
        选择加盟商
      </div>
      <div class="search">
        <div @click="show_name = true" class="down c_flex">
          加盟商名称
          <svg-icon class-name="icon_down m-left" icon-class="trigle" />
        </div>
        <div class="down c_flex">
          <franchiess-status :state.sync="my_state" ref="search_ref">
            <span @click="changeShow()">加盟商状态</span> 
          </franchiess-status>
          <svg-icon class-name="icon_down m-left" icon-class="trigle" />
        </div>
        <div @click="search" class="search_trigger c_flex">搜索</div>
      </div>
      <div @click="addFranchisee" class="add c_flex">
        <svg-icon class-name="icon_down2 m-right" icon-class="add" /> 新增加盟商
      </div>

    </div>
    <list ref="my_franchisee" :franchisee_name="my_name" :my_status="my_state"></list>
    <out-sky :type="type" franchisee_type="franchisee" :show_add.sync="show_add"></out-sky>
    <franchiess-name v-model="my_name" :show_add.sync="show_name">
    </franchiess-name>
  </div>
</template>

<script>
  import HeadSearch from '@/components/HeadSearch';
  import OutSky from '@/views/franchisee/form/OutSky';
  import List from '@/views/franchisee/list/list';
  import FranchiessStatus from './search/FranchiessStatus.vue';
  import FranchiessName from './search/FranchiessName.vue';
  export default {
    components: {
      HeadSearch,
      OutSky,
      List,
      FranchiessStatus,
      FranchiessName,
    },
    data() {
      return {
        type: 'add',
        show_add: false,
        my_state: 0,
        my_name: '',
        show_name: false,
      }
    },
    methods: {
      addFranchisee() {
        this.type = 'add'
        this.show_add = true
      },
      changeShow() {
        this.$refs.search_ref.change_pop()
      },
      search(){
        this.$refs.my_franchisee.all_handle();
      }
    },
  }
</script>

<style lang="less" scoped>
  .icon_down {
    width: 15px;
    height: 13px;
  }

  .all {
    margin: 0;
    padding: 0;
    background-color: #f3f5f7;
    min-height: calc(93vh);
    box-sizing: border-box;


    .time_prograss {
      padding: 20px 24px;

      .time_title {
        margin: -10px 0 30px 0;
        color: rgba(51, 51, 51, 1);
        font-size: 24px;
      }

      .search {
        display: flex;
        color: rgba(51, 51, 51, 1);
        font-size: 20px;
        margin: 0 auto;

        .down {

          width: 240px;
          height: 80px;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          margin-right: 20px;


        }

        .search_trigger {
          height: 80px;
          flex: 1;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
        }
      }

      .add {
        width: 100%;
        height: 60px;
        margin: 25px auto 20px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 8px;
        font-size: 24px;

        .icon_down2 {
          width: 32px;
          height: 33px;
        }

      }


    }


  }
</style>